<template>
	<view>
		<view class="">
			<image src="@/static/img/user/vipvj.png" mode="widthFix" style="width: 750rpx;"></image>
			<image class="image" src="@/static/img/user/touxiang.png" mode="widthFix" style="width: 134rpx;"></image>
			<view class="name">xxxxxxxx</view>
		</view>

		<view class="title">
			<view class="" style="font-size: 30upx;">鸿茗商城会员条件</view>
			<view class="fs28 mt-2">
				支付199元年费可成为红酒来客会员，会员自付费日起一年
				内有效；半年内购酒金额达5000元免费赠送一年会员。
			</view>
			<view class=" mt-1" style="font-size: 30upx;">鸿茗商城会员权益</view>
			<view class="fs28 mt-2 flex-wrap">
				<view class="">
					1. 在鸿茗商城商城购酒享受9折优惠价;
				</view>
				<view class="">
					2. 购酒可免费发顺丰专享快递。
				</view>
			</view>
		</view>

		<view class="footer d-flex ml-5">
			<!-- <image src="@/static/img/login/yiyuedu-xuanzhong.png" mode="widthFix" style="width: 30rpx;"></image> -->
			<label class="d-flex" @click="selectItem">
				<view class="radio">
					<radio style="transform:scale(0.7)" value="1" color="#29ad97" :checked="checked"></radio>
				</view>
			</label>
			<view class="fs28 ml-1 mt-1 ">我同意</view>
			<view class="fs28 mt-1" style="color: #29ad97;">《鸿茗商城会员服务协议》</view>
			<view class="fs28 mt-1" style="color: #29ad97;">《用户隐私政策》</view>
		</view>

		<view class="d-flex btn3 ls2 ml-4" @tap="openVip">
			<view class="btn">
				<view class="vip">¥</view>
				<view class="vipData">199</view>
				<view class="vip">/年</view>
				<view class="vip v1">¥299</view>
            </view>
			<view class="btn4">立即开通</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
			};
		},
		methods: {
			selectItem() {
				this.checked = !this.checked
			
			},
			openVip(){
				if(!this.checked){
					uni.showToast({
						title: '请先勾选隐私政策',
						icon:"none"
					});
					return
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.image,
	.name {
		position: relative;
		top: -480rpx;
		left: 308rpx;
		z-index: 1000;
	}

	.name {
		top: -460rpx;
		color: white;
	}

	.title {
		width: 90%;
		height: 100%;
		margin: 40rpx 50rpx;
		position: relative;
		top: -200rpx;
	}

	.footer {
		position: relative;
		top: -150rpx;
	}

	.fs28 {
		font-size: 24rpx
	}

	.btn4 {
		// background-color: #29ad97;
		color: white;
		margin-left: 180rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
	}

	.btn3 {
		background-image: linear-gradient(130deg, rgba(237, 201, 125, 1.0) 350rpx, rgba(198, 8, 8, 1.0)100rpx);
		min-width: 100rpx;
		border: 1rpx solid #29ad97;
		border-radius: 50rpx;
		padding: 10rpx 50rpx;
		margin-right: 40rpx;
		height: 80rpx;
		position: relative;
		top: -100rpx;
	}

	.vip {
		margin-top: 35rpx;
		font-size: 28rpx;
		letter-spacing: 3rpx;
	}
	.vipData{
		font-size: 60rpx;
		// margin-top: 10rpx;
		font-weight: 900;
	}
	.btn{
		display: flex;
		// margin-left: 30rpx;
	}
	.v1{
		text-decoration: line-through;
		margin-left: 10rpx;
	}
</style>
